import React, { Component } from 'react';
import ImageViewer from 'react-native-image-zoom-viewer';

import {
    StyleSheet,
    Text,
    View,
    StatusBar,
    Image,
    ScrollView,
    TouchableHighlight,
    TouchableOpacity,
    SafeAreaView,
    Modal,
    Platform
} from 'react-native';
import StatusBarSelf from '../StatusBarSelf';

const isIos = Platform.OS == 'ios';

export default class BigImageViewer extends Component {

    constructor(props) {
        super(props)
        let data = props.route.params;
        let index = 0;
        let idx = 0;
        let list = [];
        if (data) {
            console.log(data.imgList)
            let arr = data.imgList || data.imgs || showList;
            arr.map((item, idx) => {
                if (typeof item == "object") {
                    list.push(item);
                } else {
                    list.push({
                        url: item
                    })
                }
            })
            idx = data.idx || idx
        }

        this.state = {
            idx: idx || 0,//初始展示第几张
            images: list,
        }
    }

    render() {
        const navigation = this.props.navigation;
        return (
            <View style={{ backgroundColor: '#000000' }}>
                <View style={styles.body}>
                    <StatusBarSelf color={'#000'}/>
                    <View style={styles.ImageBox}>
                    {/* <Modal visible={true} transparent={true}> */}
                        <ImageViewer
                            imageUrls={this.state.images} // 照片路径
                            menuContext={styles.menuContext}
                            saveToLocalByLongPress={true}
                            index={this.state.idx}
                            pageAnimateTime={200}
                            // flipThreshold={Constant.screen_width/2}
                            // renderHeader={(currentIndex) => {
                            //     return (
                            //         <TouchableOpacity style={{ width: '100%', justifyContent:'center', height: isIos ? 44:49, backgroundColor: '#000'}}
                            //             onPress={() => {
                            //                 navigation.goBack();
                            //             }}
                            //         >
                            //             {/* <Text></Text> */}
                            //             <Image source={require('source/image/comm/back_white.png')} style={{ width: 15, height: 15, marginLeft: 15 }} />
                            //         </TouchableOpacity>
                            //     )
                            // }}
                            onClick={() => { // 图片单击事件
                                navigation.goBack()
                            }}
                        />
                        {/* </Modal> */}
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    body: {
        backgroundColor: '#000',
        height: Constant.screen_height
    },
    ImageBox: {
        flex: 1,
    },
    img: {
        width: 750 * sREM,
        height: 562.5 * sREM,
        marginTop: 235 * sREM
    },
})